<template>
  <div class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="基本情况"
      back-icon-color="#fff"
      title-color="#fff"
    />

    <u-tabs
      :list="list"
      is-scroll
      :current="current"
      @change="change"
      active-color="rgb(1, 72, 51)"
      inactive-color="rgb(153, 153, 153)"
    ></u-tabs>
    <scroll-view
      :scroll-into-view="toView"
      scroll-with-animation
      scroll-y
      class="content"
      @scroll="handleScroll"
    >
      <div class="city-box m-b-10" v-if="countNoShow">
        <div class="city-input">
          <u-input
            v-model="searchData.cityStr"
            placeholder="请选择"
            type="select"
            @click="cityShow = true"
            :select-open="cityShow"
          />
        </div>
      </div>
         <coalStatistics :countyNo="countyNo" :customerList="customerList"></coalStatistics>
      <div id="view1">
        <u-card
          box-shadow="0px 0px 10px rgba(1, 72, 51, 0.2)"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="工作面情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="gzmqk">
              <div class="u-p-20">掘进（个）</div>

              <div class="gzm-box">
                <div class="gzm-title">
                  <div>正常工作面</div>
                  <div>
                    {{ zcgzmTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goGzm({ drivingMethod: '', type: '0' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box">
                    <div
                      v-for="obj in zcgzm"
                      class="gzm-item"
                      @click="goGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-zt">
                <div class="gzm-title">
                  <div>暂停工作面</div>
                  <div>
                    {{ ztgzmTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goZtGzm({ drivingMethod: '', type: '0' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box">
                    <div
                      v-for="obj in ztgzm"
                      class="gzm-item"
                      @click="goZtGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-kg">
                <div class="gzm-title">
                  <div>开工数量/完工数量</div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box gzm-item-box1">
                    <div v-for="obj in kgsl" class="gzm-item">
                      <div>{{ obj.val }}/{{ obj.val1 }}</div>
                      <div class="gzm-name">{{ obj.txt }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="gzmqk gzmqk-hc">
              <div class="u-p-20">回采（个）</div>

              <div class="gzm-box">
                <div class="gzm-title">
                  <div>正常工作面</div>
                  <div>
                    {{ zcgzm_hcTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goGzm({ drivingMethod: '', type: '1' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div
                    class="gzm-item-box"
                    style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"
                  >
                    <div
                      v-for="obj in zcgzm_hc"
                      class="gzm-item"
                      @click="goGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-zt">
                <div class="gzm-title">
                  <div>暂停工作面</div>
                  <div>
                    {{ ztgzm_hcTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goZtGzm({ drivingMethod: '', type: '1' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div
                    class="gzm-item-box"
                    style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"
                  >
                    <div
                      v-for="obj in ztgzm_hc"
                      class="gzm-item"
                      @click="goZtGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-kg">
                <div class="gzm-title">
                  <div>开工数量/完工数量</div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box gzm-item-box1">
                    <div v-for="obj in kgsl_hc" class="gzm-item">
                      <div>{{ obj.val }}/{{ obj.val1 }}</div>
                      <div class="gzm-name">{{ obj.txt }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view2" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 10px rgba(1, 72, 51, 0.2)"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="储量变动情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <trend />
          </view>
        </u-card>
      </div>

      <div id="view3" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 10px rgba(1, 72, 51, 0.2)"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="三量可采期情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="gzm-box">
              <div class="gzm-title">
                <div>接续正常矿井（家）</div>
                <div @click="toMine('1,2,3')">
                  {{ jxzckjTotal }}
                  <u-icon class="arrow-icon" name="arrow-right"> </u-icon>
                </div>
              </div>

              <div class="gzm-item-bg">
                <div class="gzm-item-box gzm-item-box2">
                  <div v-for="obj in jxzckj" class="gzm-item">
                    <div>{{ obj.val }}</div>
                    <div class="gzm-name" @click="toMine(obj.id)">
                      {{ obj.txt
                      }}<u-icon
                        class="arrow-icon"
                        color="rgb(196, 196, 196)"
                        name="arrow-right"
                        size="20"
                      >
                      </u-icon>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="gzm-box gzm-box-jx">
              <div class="gzm-title">
                <div>接续紧张矿井（家）</div>
                <div @click="toMine('4,5,6')">
                  {{ jxjzkjTotal
                  }}<u-icon class="arrow-icon" name="arrow-right"> </u-icon>
                </div>
              </div>

              <div class="gzm-item-bg">
                <div class="gzm-item-box gzm-item-box2">
                  <div v-for="obj in jxjzkj" class="gzm-item">
                    <div>{{ obj.val }}</div>
                    <div class="gzm-name" @click="toMine(obj.id)">
                      {{ obj.txt }}
                      <u-icon
                        class="arrow-icon"
                        color="rgb(196, 196, 196)"
                        name="arrow-right"
                        size="20"
                      >
                      </u-icon>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="gzm-box gzm-box-lj">
              <div class="gzm-title">
                <div>临近接续紧张矿井（家）</div>
                <div @click="toMine('7,8,9')">
                  {{ ljjxjzkjTotal }}
                  <u-icon class="arrow-icon" name="arrow-right"> </u-icon>
                </div>
              </div>

              <div class="gzm-item-bg">
                <div class="gzm-item-box gzm-item-box2">
                  <div v-for="obj in ljjxjzkj" class="gzm-item">
                    <div>{{ obj.val }}</div>
                    <div class="gzm-name" @click="toMine(obj.id)">
                      {{ obj.txt }}
                      <u-icon
                        class="arrow-icon"
                        color="rgb(196, 196, 196)"
                        name="arrow-right"
                        size="20"
                      >
                      </u-icon>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </u-card>
      </div>
    </scroll-view>

    <u-picker
      mode="selector"
      v-model="cityShow"
      :range="cityList"
      @confirm="cityConfirm"
      range-key="label"
    ></u-picker>
  </div>
</template>

<script>
import trend from "./trend/index.vue";
import coalStatistics from "../components/coalStatistics.vue";
export default {
  components: { trend, coalStatistics },
  data() {
    return {
      cityShow: false,
      current: 0,
      toView: "",
      list: [
        { name: "工作面情况" },
        { name: "储量变动情况" },
        { name: "三量可采期情况" },
      ],
      cityList: [],
      customerList: [],
      searchData: {},
      zcgzmTotal: 0,
      ztgzmTotal: 0,
      zcgzm: [],
      ztgzm: [],
      kgsl: [],
      zcgzm_hcTotal: 0,
      ztgzm_hcTotal: 0,
      zcgzm_hc: [],
      ztgzm_hc: [],
      kgsl_hc: [],
      jxzckjTotal: 0,
      jxjzkjTotal: 0,
      ljjxjzkjTotal: 0,
      jxzckj: [],
      jxjzkj: [],
      ljjxjzkj: [],
      countyNo: "",
      countNoShow: false,
    };
  },
  async onLoad() {
    if (getApp().globalData.userInfo.superviseLevel === "40") {
      this.countNoShow = true;
    }
    // 获取区县
    this.getCityList();
  },
  methods: {
    init() {
      // // 获取煤矿
      this.getCustomerList();
      // 获取工作面情况
      this.statisticEngInfo();
      // 三量可采期情况
      this.situation();
    },
        goMineList() {
          uni.navigateTo({
            url: `/pages/cjt/basicInformation/mineList/index?countyNo=${this.countyNo}`,
          });
        },
    cityConfirm(index) {
      this.searchData.cityStr = this.cityList[index].label;
      this.countyNo = this.cityList[index].id;
      this.init();
    },
    statisticEngInfo() {
      let data = {
        // countyNo: this.countyNo,
      };
      this.$post("/cjt/app/statisticEngInfo", data).then((res) => {
        let jjInfo = res.body.jjInfo;
        this.zcgzmTotal = jjInfo.zcEngSum;
        this.ztgzmTotal = jjInfo.ztEngSum;
        let cmInfo = res.body.cmInfo;
        this.zcgzm_hcTotal = cmInfo.zcEngSum;
        this.ztgzm_hcTotal = cmInfo.ztEngSum;
        (this.zcgzm = [
          {
            val: jjInfo.zcBlastingEngCount,
            txt: "炮掘",
            drivingMethod: "001",
            type: "0",
          },
          {
            val: jjInfo.zcComprehensiveEngCount,
            txt: "综掘",
            drivingMethod: "002",
            type: "0",
          },
          {
            val: jjInfo.zcOtherEngCount,
            txt: "其他",
            drivingMethod: "099",
            type: "0",
          },
          {
            val: jjInfo.zcIntelligentEngCount,
            txt: "智能化",
            drivingMethod: "999",
            type: "0",
          },
        ]),
          (this.ztgzm = [
            {
              val: jjInfo.ztBlastingEngCount,
              txt: "炮掘",
              drivingMethod: "001",
              type: "0",
            },
            {
              val: jjInfo.ztComprehensiveEngCount,
              txt: "综掘",
              drivingMethod: "002",
              type: "0",
            },
            {
              val: jjInfo.ztOtherEngCount,
              txt: "其他",
              drivingMethod: "099",
              type: "0",
            },
            {
              val: jjInfo.ztIntelligentEngCount,
              txt: "智能化",
              drivingMethod: "999",
              type: "0",
            },
          ]);
        (this.kgsl = [
          {
            val: jjInfo.thisMonthStartCount,
            val1: jjInfo.thisMonthEndCount,
            txt: "本月",
          },
          {
            val: jjInfo.thisYearStartCount,
            val1: jjInfo.thisYearEndCount,
            txt: "本年",
          },
        ]),
          (this.zcgzm_hc = [
            {
              val: cmInfo.zcBlastingEngCount,
              txt: "炮采",
              drivingMethod: "001",
              type: "1",
            },
            {
              val: cmInfo.zcComprehensiveEngCount,
              txt: "综采",
              drivingMethod: "005",
              type: "1",
            },
            {
              val: cmInfo.zcOrdinaryEngCount,
              txt: "普采",
              drivingMethod: "006",
              type: "1",
            },
            {
              val: cmInfo.zcOtherEngCount,
              txt: "其他",
              drivingMethod: "099",
              type: "1",
            },
            {
              val: cmInfo.zcIntelligentEngCount,
              txt: "智能化",
              drivingMethod: "009",
              type: "1",
            },
          ]),
          (this.ztgzm_hc = [
            {
              val: cmInfo.ztBlastingEngCount,
              txt: "炮采",
              drivingMethod: "001",
              type: "1",
            },
            {
              val: cmInfo.ztComprehensiveEngCount,
              txt: "综采",
              drivingMethod: "005",
              type: "1",
            },
            {
              val: cmInfo.ztOrdinaryEngCount,
              txt: "普采",
              drivingMethod: "006",
              type: "1",
            },
            {
              val: cmInfo.ztOtherEngCount,
              txt: "其他",
              drivingMethod: "009",
              type: "1",
            },
            {
              val: cmInfo.ztIntelligentEngCount,
              txt: "智能化",
              drivingMethod: "999",
              type: "1",
            },
          ]);
        this.kgsl_hc = [
          {
            val: cmInfo.thisMonthStartCount,
            val1: cmInfo.thisMonthEndCount,
            txt: "本月",
          },
          {
            val: cmInfo.thisYearStartCount,
            val1: cmInfo.thisYearEndCount,
            txt: "本年",
          },
        ];
      });
    },
    situation() {
      let data = {
        // countyNo: this.countyNo,
      };
      this.$post("/cjt/app/four/mine/date/situation", data).then((res) => {
        let jxzckj = res.body.zc;
        let jxjzkj = res.body.jz;
        let ljjxjzkj = res.body.lj;
        this.jxzckjTotal = jxzckj.zs;
        this.jxjzkjTotal = jxjzkj.zs;
        this.ljjxjzkjTotal = ljjxjzkj.zs;
        (this.jxzckj = [
          {
            val: jxzckj.kt,
            id: "1",
            txt: "开拓接续正常",
          },
          {
            val: jxzckj.zb,
            id: "2",
            txt: "准备接续正常",
          },
          {
            val: jxzckj.hc,
            id: "3",
            txt: "回采接续正常",
          },
        ]),
          (this.jxjzkj = [
            {
              val: jxjzkj.kt,
              id: "4",
              txt: "开拓接续紧张",
            },
            {
              val: jxjzkj.zb,
              id: "5",
              txt: "准备接续紧张",
            },
            {
              val: jxjzkj.hc,
              id: "6",
              txt: "回采接续紧张",
            },
          ]),
          (this.ljjxjzkj = [
            {
              val: ljjxjzkj.kt,
              id: "7",
              txt: "临近开拓接续紧张",
            },
            {
              val: ljjxjzkj.zb,
              id: "8",
              txt: "临近准备接续紧张",
            },
            {
              val: ljjxjzkj.hc,
              id: "9",
              txt: "临近回采接续紧张",
            },
          ]);
      });
    },
    getCityList() {
      this.$get("/cjt/common/app/getCountyList").then((res) => {
        this.cityList = res.body;
        this.searchData.cityStr = res.body[0].label;
        this.countyNo = this.cityList[0].id;
        this.init();
      });
    },
    getCustomerList() {
      // this.$get("/cjt/common/getCustomerList?countyNo=" + this.countyNo).then(
      this.$get("/cjt/common/getCustomerList").then(
        (res) => {
          this.customerList = res.body;
        }
      );
    },
    toMine(four) {
      console.log('four',four);
      
      let slData = {
        countyNo: this.countyNo,
        four,
      };
      uni.navigateTo({
        url:
          "/pages/cjt/basicInformation/mineList/index?slData=" +
          JSON.stringify(slData),
      });
    },
    goGzm(obj) {
      let data = {
        countyNo: this.countyNo,
        type: obj.type,
        drivingMethod: obj.drivingMethod,
        currentStatus: "0",
      };
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/gzm/index?data=${JSON.stringify(
          data
        )}`,
      });
    },
    goZtGzm(obj) {
      let data = {
        countyNo: this.countyNo,
        type: obj.type,
        drivingMethod: obj.drivingMethod,
        currentStatus: "1",
      };
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/gzm/index?data=${JSON.stringify(
          data
        )}`,
      });
    },
    change(index) {
      this.current = index;
      this.toView = `view${index + 1}`;
    },
    handleScroll({ detail }) {
      // 112 是scroll-view到顶部的距离
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#view1")
        .boundingClientRect((res) => {
          if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 0;
          }
        })
        .exec();
      query
        .select("#view2")
        .boundingClientRect((res) => {
          if (res.bottom - 112 > 0 && res.top - 112 < 0) {
            this.current = 1;
          }
        })
        .exec();
      query
        .select("#view3")
        .boundingClientRect((res) => {
        if (res.bottom - 112 >0 && res.top - 444 < 0) {
             this.current = 2;
          }
        })
        .exec();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
}

.city-box {
  // display: grid;
  // grid-template-columns: 110px auto;
  // grid-column-gap: 10px;

  .city-input {
    background: rgba(0, 0, 0, 0.03);
    height: 35px;
    padding: 5px 10px;
    border-radius: 4px;

  }

  .mine-num {
    text-align: center;
    width: 100%;
    height: 45px;
    background: #fff;
    line-height: 40px;
  }

  .mine-num-val {
    color: rgb(61, 95, 255);
    font-size: 16px;
    margin-left: 10px;
    position: relative;
    top: 1px;
  }
}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f6f6f6;
}

.gzmqk {
  background: linear-gradient(rgb(243, 247, 255), rgba(255, 255, 255, 0));
  border-radius: 6px 6px 0 0;
}

.gzm-box {
  background: linear-gradient(
    rgba(10, 207, 151, 0.5),
    rgba(167, 238, 217, 0.5)
  );
  margin: 10px;
  margin-top: 0;
  border-radius: 6px;
  padding-bottom: 3px;

  .gzm-item-bg {
    padding-top: 10px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 10px;
    border-radius: 6px;

    .gzm-item-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      background: rgba(207, 207, 207, 0.5);
      grid-column-gap: 1px;

      .gzm-item {
        text-align: center;
        background: #fff;
        padding-top: 10px;
        padding-bottom: 10px;

        .gzm-name {
          font-size: 12px;
          margin-top: 10px;
        }
      }
    }

    .gzm-item-box1 {
      grid-template-columns: 1fr 1fr;
    }

    .gzm-item-box2 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.gzm-box-zt {
  background: linear-gradient(rgba(210, 158, 8, 0.5), rgba(239, 220, 166, 0.5));
}

.gzm-box-kg {
  background: linear-gradient(rgb(204, 239, 255), rgba(224, 249, 255, 0.85));
}

.gzm-box-jx {
  background: linear-gradient(rgb(255, 158, 80), rgb(254, 177, 51));
}

.gzm-box-lj {
  background: linear-gradient(rgba(255, 191, 60, 0.5), rgba(255, 191, 60, 0.5));
}

.gzm-title {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.gzmqk-hc {
  background: linear-gradient(rgb(255, 250, 242), rgba(255, 250, 242, 0));
}
.mineBox {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  .mine-num-val {
    color: rgb(61, 95, 255);
    font-size: 16px;
    margin-left: 10px;
  }
}
/deep/ .uni-input-input{
  color: #333;
}



</style>
